<template>
	<view>
		<view class="content">
			<view class="hot block">
				<view class="block-title">热门话题</view>
				<view class="flex-tag">
					<view class="topic-tag" v-for="tag in topicTags" :key="tag.id">{{ tag.key }}</view>
				</view>
			</view>
			<view class="other-block block"><view class="block-title">最新动态</view></view>
			<share-trends v-for="(item,index) in trendsList" :key="index" :k="index"></share-trends>
		</view>
	</view>
</template>

<script>
import ShareTrends from '@/components/shareTrends';

export default {
	components: {
		ShareTrends
	},
	data() {
		return {
			topicTags: [
				{
					key: '#新时代文明实践活动#',
					id: 0
				},
				{
					key: '#当代雷锋#',
					id: 1
				},
				{
					key: '#中国好人#',
					id: 2
				},
				{
					key: '#时代楷模#',
					id: 3
				},
				{
					key: '#打卡活动现场#',
					id: 4
				}
			],
			trendsList: [1,2,3,4]
		};
	},
	onReady() {
		console.log(this.systemInfo);
	},
	onHide() {
		uni.$emit('trends-index-hide');
	}
};
</script>

<style lang="scss">
@import '../../../commom/styles/icons.css';

.content {
	background: #f4f5f9;
	// uni app已自动处理了全面屏高度 小程序端或许要兼容处理
	min-height: calc(100vh - 44px - 50px);
	// align-items: flex-start;
	justify-content: flex-start;
}

.hover-camera {
	opacity: 0.6;
}

.block {
	padding: 20rpx 30rpx;
	margin-bottom: 10rpx;
	background-color: #fff;
	width: 100%;
	box-sizing: border-box;
}

.other-block {
	padding: 20rpx 30rpx 0;
	margin-bottom: 0;
	.block-title {
		margin-bottom: 0;
	}
}

.block-title {
	font-size: 26rpx;
	margin-bottom: 20rpx;
	font-weight: 500;
}

.flex-tag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex-direction: row;
	margin-right: -30rpx;
	width: 100%;
	.topic-tag {
		color: #7a9ecb;
		font-size: 28rpx;
		margin: 0 30rpx 10rpx 0;
	}
}

</style>
